<template>
  <div class="smart-qa-panel">
    <h2>智能问答</h2>
    <div class="qa-content">
      <p>请输入您的问题：</p>
      <input
        type="text"
        v-model="question"
        @keyup.enter="askQuestion"
        placeholder="例如：如何使用Vue？"
      />
      <button @click="askQuestion">提问</button>
      <div v-if="answer">
        <h3>回答：</h3>
        <p>{{ answer }}</p>
      </div>
      <div v-if="error" class="error">
        <p>{{ error }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "SmartQAPanel",
  data() {
    return {
      question: "",
      answer: "",
      error: "",
    };
  },
  methods: {
    async askQuestion() {
      if (!this.question.trim()) {
        this.error = "请输入问题";
        return;
      }

      try {
        const response = await axios.post("/api/ask", {
          question: this.question,
        });
        this.answer = response.data.answer;
        this.error = "";
      } catch (err) {
        this.error = "无法获取答案，请稍后再试";
        console.error(err);
      }
    },
  },
};
</script>

<style scoped>
.smart-qa-panel {
  position: fixed;
  right: 0;
  top: 0;
  width: 300px;
  height: 100%;
  background-color: #f9f9f9;
  padding: 20px;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
}

.qa-content {
  margin-top: 20px;
}

.error {
  color: red;
  margin-top: 10px;
}
</style>